<template>
  <!-- 我的-已登录 -->
  <div class="user_index">
    <div class="header">
      <!-- 会员卡 -->
      <div class="card" v-if="$store.state.user.role === 'member'">
        <div class="label_status" v-if="userData.is_student === 1">{{userData.xjztName}}</div>
        <div class="user_info" @click="updateUser">
          <img class="per_img" :src="userData.avatar" alt="">
          <div class="info">
            <h3>{{userData.name}}<img class="label" src="../../../assets/img/modules/user/label_member.png" alt=""></h3>
          </div>
        </div>
        <div class="code">{{userData.user_no}}</div>
      </div>
      <div class="card card_vip"  v-if="$store.state.user.role === 'vip'">
        <div class="label_status">{{userData.xjztName}}</div> <!--0:注册中,10:转学,2:在籍,3:待注册,4:休学,5:退学,8:毕业-->
        <div class="user_info">
          <img class="per_img" :src="userData.avatar" alt="">
          <div class="info">
            <h3>{{userData.name}}<img class="label" src="../../../assets/img/modules/user/label_vip.png" alt=""></h3>
            <p>工会会员</p>
          </div>
        </div>
        <div class="code">{{userData.user_no}}</div>
      </div>
      <div class="btn_box">
        <div class="btn">
          <img src="../../../assets/img/modules/user/ico_jf.png" alt="">
          <h3>我的积分</h3>
          <p>0积分</p>
        </div>
        <a :href="'/personal-coupon?phone=' + userData.phone" class="btn">
          <img src="../../../assets/img/modules/user/ico_bt.png" alt="">
          <h3>助学金/补贴</h3>
          <p>待领取</p>
        </a>
        <div class="btn">
          <img src="../../../assets/img/modules/user/ico_yb.png" alt="">
          <h3>我的圆币</h3>
          <p>0圆币</p>
        </div>
      </div>
    </div>
    <!-- banner幻灯片 -->
    <div class="banner">
      <swiper :options="swiperBanner" ref="swiperBanner">
        <swiper-slide v-for="(item, index) in bannerList" :key="item.url + '' + index">
          <a :href="item.url + (item.is_share === 1?'&phone='+userData.phone+'&device='+$store.state.device:'')" class="item"><img :src="item.pic" alt=""></a>
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </div>
    <div class="equities_mdl">
      <!-- 会员权益-收缩 -->
      <div :class="['equities_head', {'act': membereQuitiesShow}]" @click="quitiesUnfold">
        <h3>会员权益</h3>
        <i class="ico_tri"></i>
        <div class="img_list">
          <img class="icon" src="../../../assets/img/modules/user/qy_ico01.png" alt="">
          <img class="icon" src="../../../assets/img/modules/user/qy_ico02.png" alt="">
          <img class="icon" src="../../../assets/img/modules/user/qy_ico03.png" alt="">
        </div>
        <img class="arrow_top" v-show="membereQuitiesShow" src="../../../assets/img/modules/user/arrow_btm.png" alt="">
      </div>
      <!-- 会员专属权益 -->
      <div class="equities" style="padding-top:0;" v-show="membereQuitiesShow">
        <div class="title"><img src="../../../assets/img/modules/user/tit01.png" alt=""></div>
        <ul>
          <a href="/score-service">
            <img class="icon" src="../../../assets/img/modules/user/qy_ico01.png" alt="">
            <p>分享有礼</p>
          </a>
          <a  href="/score-service">
            <img class="icon" src="../../../assets/img/modules/user/qy_ico02.png" alt="">
            <p>积分兑换</p>
          </a>
          <a  href="/score-service">
            <img class="icon" src="../../../assets/img/modules/user/qy_ico03.png" alt="">
            <p>助学金</p>
          </a>
          <a  href="/score-service">
            <img class="icon" src="../../../assets/img/modules/user/qy_ico04.png" alt="">
            <p>圆币商城</p>
          </a>
          <a href="/score-service">
            <img class="icon" src="../../../assets/img/modules/user/qy_ico05.png" alt="">
            <p>咨询1对1</p>
          </a>
          <a href="/score-service">
            <img class="icon" src="../../../assets/img/modules/user/qy_ico06.png" alt="">
            <p>0元公开课</p>
          </a>
        </ul>
      </div>
      <!-- VIP会员权限 -->
      <div class="equities equities_vip" v-show="membereQuitiesShow">
        <div class="title"><img src="../../../assets/img/modules/user/tit02.png" alt=""></div>
        <ul>
          <a href="/score-service">
            <img class="icon" src="../../../assets/img/modules/user/vip_qy_ico01.png" alt="">
            <p>工会补贴<br>一键申领</p>
            <img class="label" src="../../../assets/img/modules/user/label_gh.png" alt="">
          </a>
          <a href="/score-service">
            <img class="icon" src="../../../assets/img/modules/user/vip_qy_ico02.png" alt="">
            <p>工会培训</p>
            <img class="label" src="../../../assets/img/modules/user/label_gh.png" alt="">
          </a>
          <a href="/score-service">
            <img class="icon" src="../../../assets/img/modules/user/vip_qy_ico03.png" alt="">
            <p>更多权益<br>待开放中</p>
          </a>
        </ul>
      </div>
    </div>
    <!-- 学业服务 -->
    <div v-if="$store.state.device === 'APP'" class="xyfw_mdl equities_mdl">
      <div :class="['equities_head', {'act': studyServeShow}]" @click="studyServeUnfold">
        <h3>学业服务</h3>
        <i class="ico_tri"></i>
        <div class="img_list" v-show="!studyServeShow">
          <img class="icon" src="../../../assets/img/modules/user/xyfw_ico01.png" alt="" @click="appXJ(1)">
          <img class="icon" src="../../../assets/img/modules/user/xyfw_ico02.png" alt="" @click="appXJ(2)">
          <img class="icon" src="../../../assets/img/modules/user/xyfw_ico03.png" alt="" @click="appXJ(3)">
          <img class="icon" src="../../../assets/img/modules/user/xyfw_ico04.png" alt="" @click="appXJ(4)">
          <img class="icon" src="../../../assets/img/modules/user/xyfw_ico05.png" alt="" @click="appXJ(5)">
        </div>
      </div>
      <div class="xyfw_list" v-show="studyServeShow">
        <ul>
          <li @click="appXJ(1)"><img class="icon" src="../../../assets/img/modules/user/xyfw_ico01.png" alt="">
            <p>学籍</p></li>
          <li @click="appXJ(2)"><img class="icon" src="../../../assets/img/modules/user/xyfw_ico01.png" alt="">
            <p>教材</p></li>
          <li @click="appXJ(3)"><img class="icon" src="../../../assets/img/modules/user/xyfw_ico01.png" alt="">
            <p>考试</p></li>
          <li @click="appXJ(4)"><img class="icon" src="../../../assets/img/modules/user/xyfw_ico01.png" alt="">
            <p>成绩</p></li>
          <li @click="appXJ(5)"><img class="icon" src="../../../assets/img/modules/user/xyfw_ico01.png" alt="">
            <p>毕业</p></li>
        </ul>
      </div>
    </div>
    <!-- 在线学习 -->
    <div  v-if="$store.state.device === 'WX' && $store.state.user.role === 'vip'"  class="equities_mdl">
      <div class="equities_head">
        <h3>在线学习</h3>
        <img class="app_tit" src="../../../assets/img/modules/user/app_tit.png" alt="">
      </div>
    </div>
    <!-- 入口列表 -->
    <div class="enter_list">
      <!--会员(app wx) vip(app wx)-->
      <a class="btn" href="javascript:;" @click="openUrl(1)">
        <img class="icon" src="../../../assets/img/modules/user/ico_order.png" alt="">
        <!--<i class="red_dot"></i>-->
        <div class="text">我的订单</div>
        <div class="right">
          <i class="tri"></i>
        </div>
      </a>
      <!--会员(app)  vip(app)-->
      <a v-if="$store.state.device === 'APP'" class="btn" href="javascript:;"  @click="openUrl(2)">
        <img class="icon" src="../../../assets/img/modules/user/ico_ques.png" alt="">
        <div class="text">常见问题</div>
        <div class="right">
          <i class="tri"></i>
        </div>
      </a>
      <!--会员(wx) -->
      <a v-if="$store.state.device === 'WX' && $store.state.user.role === 'member' && userData.is_student === 1" class="btn"
         href="javascript:;"  @click="openUrl(3)">
        <img class="icon" src="../../../assets/img/modules/user/ico_xjzl.png" alt="">
        <div class="text">学籍资料</div>
        <div class="right">
          <i class="tri"></i>
          <!--<span>未完善</span>-->
        </div>
      </a>
      <!--会员(wx) -->
      <a v-if="$store.state.device === 'WX' && $store.state.user.role === 'member' && $store.state.gsign === 'qy'" class="btn"
         href="javascript:;" @click="openUrl(4)">
        <img class="icon" src="../../../assets/img/modules/user/ico_cs.png" alt="">
        <div class="text">入学测试</div>
        <div class="right">
          <i class="tri"></i>
          <!--<span>待测试</span>-->
        </div>
      </a>
      <!--会员(app)  vip(app wx) -->
      <a v-if="$store.state.user.isGZ !== '0'" class="btn"
         :href="'/share-index?device='+$store.state.device+'&gsign='+$store.state.gsign+'&uniacid='+$store.state.uniacid+'&phone='+userData.phone">
        <img class="icon" src="../../../assets/img/modules/user/ico_invite.png" alt="">
        <div class="text">邀请好友</div>
        <div class="right">
          <i class="tri"></i>
          <span>轻松赚学费</span>
        </div>
      </a>
      <!--会员(wx)  vip(wx)-->
      <a v-if="$store.state.device === 'WX'" class="btn" href="javascript:;"  @click="openUrl(6)">
        <img class="icon" src="../../../assets/img/modules/user/ico_download.png" alt="">
        <div class="text">资料下载</div>
        <div class="right">
          <i class="tri"></i>
        </div>
      </a>
      <!--会员(app)  vip(app)-->
      <a v-if="$store.state.device === 'APP' && $store.state.user.isGZ === '0'" class="btn" href="javascript:;"  @click="openUrl(7)">
        <img class="icon" src="../../../assets/img/modules/user/ico_company.png" alt="">
        <div class="text">企业绑定</div>
        <div class="right">
          <i class="tri"></i>
        </div>
      </a>
      <!--(app wx) 陈观说所有的都要显示-->
      <a v-if="userData.idCard !== ''" class="btn" href="javascript:;" @click="openUrl(8)">
        <img class="icon" src="../../../assets/img/modules/user/ico_score.png" alt="">
        <div class="text">学分认证</div>
        <div class="right">
          <i class="tri"></i>
        </div>
      </a>
      <!--学付易-->
      <a class="btn" href="javascript:;" @click="openUrl(10)">
        <img class="icon" src="../../../assets/img/modules/user/ico_xfy.png" alt="">
        <div class="text">我的学付易</div>
        <div class="right">
          <i class="tri"></i>
        </div>
      </a>
      <!--会员(app)  vip(app)-->
      <a v-if="$store.state.device === 'APP'" class="btn" href="javascript:;" @click="openUrl(9)">
        <img class="icon" src="../../../assets/img/modules/user/ico_set.png" alt="">
        <div class="text">设置</div>
        <div class="right">
          <i class="tri"></i>
        </div>
      </a>
    </div>
    <!--遮罩层-->
    <drag-loding v-if="showLoding"></drag-loding>
  </div>
</template>
<script>
import dragLoding from '@/components/loding'
export default {
  components: {
    dragLoding
  },
  data () {
    return {
      showLoding: true, // loading
      membereQuitiesShow: false, // 会员权益是否展开
      studyServeShow: false, // 学业服务是否展开
      role: 'vip', // vip、member
      bannerList: null, // banner幻灯片列表
      swiperBanner: {
        centeredSlides: true,
        autoplay: {
          delay: 2500,
          disableOnInteraction: false
        },
        pagination: {
          el: '.swiper-pagination'
        }
      },
      userData: {
        avatar: ''
      }
    }
  },
  methods: {
    /* wf_Huang 2019/9/1 0001 打开我的卡包  作废此方法 APP a标签要直接跳转 */
    openSubsidy () {
      this.$router.push({ path: '/personal-coupon', query: { phone: this.userData.phone } })
      /* if (this.$store.state.device === 'APP') {
        // eslint-disable-next-line no-undef
        Phone.goCardbag()
      } else {

      } */
    },
    /* wf_Huang 2019/9/1 0001 编辑个人信息 */
    updateUser () {
      if (this.$store.state.device === 'APP') {
        // eslint-disable-next-line no-undef
        Phone.goPersonalInfo()
      }
    },
    /* wf_Huang 2019/8/29 0029 APP 学员 */
    appXJ (index) {
      switch (index) {
        case 1:
          // eslint-disable-next-line no-undef
          Phone.XueJi()
          break
        case 2:
          // eslint-disable-next-line no-undef
          Phone.TeachMaterial()
          break
        case 3:
          // eslint-disable-next-line no-undef
          Phone.Exam()
          break
        case 4:
          // eslint-disable-next-line no-undef
          Phone.Achievement()
          break
        case 5:
          // eslint-disable-next-line no-undef
          Phone.goGraduation()
          break
      }
    },
    /* wf_Huang 2019/8/29 0029 获取banner图 */
    getBannerList () {
      this.$http({
        url: `${window.SITE_CONFIG['personalURL']}/api/ajax.app_new/getHome?gsign=${this.$store.state.gsign}&position=4`,
        method: 'post',
        withCredentials: false
      }).then(({ data: res }) => {
        if (res.status !== 200) {
          this.$toast('用户信息查询失败~')
          return false
        }
        this.bannerList = res.data
      }).catch(() => {})
    },
    /* wf_Huang 2019/8/23 0023 请求用户数据 */
    getUserData () {
      this.$http({
        url: `${window.SITE_CONFIG['personalURL']}/api/ajax.User/wxLogin`,
        method: 'post',
        data: {
          openId: this.$store.state.device === 'WX' ? this.$store.state.openid : '',
          phone: this.$store.state.user.phone,
          gsign: this.$store.state.gsign
        },
        withCredentials: false
      }).then(({ data: res }) => {
        if (res.status === 203) {
          let tostTab = this.$toast('未绑定手机号，即将前往绑定页')
          let _this = this
          setTimeout(function () {
            tostTab.clear()
            _this.$router.push({ path: '/user-index' })
          }, 2000)
          return false
        }
        if (res.status !== 200) {
          this.$toast('用户信息查询失败~')
          return false
        }
        this.userData = res.data
        this.$store.state.personal.userData = res.data
        if (res.data.isUnion === 1) { // 1是，2否
          this.$store.state.user.role = 'vip'
        } else {
          this.$store.state.user.role = 'member'
        }
        this.showLoding = false
        localStorage.setItem('stateData', JSON.stringify(this.$store.state))
      }).catch(() => {})
    },
    quitiesUnfold () {
      this.membereQuitiesShow = !this.membereQuitiesShow
    },
    studyServeUnfold () {
      this.studyServeShow = !this.studyServeShow
    },
    /* wf_Huang 2019/8/23 0023 微信授权  */
    getWx () {
      var pageUrl = encodeURIComponent(window.location.href)
      window.location.href = `http://wechat.eenet.com/eeapi.php?myaction=oauth&uniacid=${this.$route.query.uniacid}&scope=base&backurl=${pageUrl}`
    },
    /* wf_Huang 2019/8/30 0030 打开学籍资料 */
    openSchool () {
      this.$http({
        url: `${window.SITE_CONFIG['personalURL']}/api/ajax.User/getUserUrl?studentId=${this.userData.studentId}&gsign=${this.$store.state.gsign}`,
        method: 'get',
        withCredentials: false
      }).then(({ data: res }) => {
        if (res.status === 201) {
          this.$toast('渠道名称不能为空')
          return false
        }
        if (res.status === 202) {
          this.$toast('学生ID 不能为空')
          return false
        }
        if (res.status !== 200) {
          this.$toast('请求失败，请重试')
          return false
        }
        window.location.href = res.data.url
      }).catch(() => {})
    },
    /* wf_Huang 2019/8/24 0024 打开对应的链接  */
    openUrl (index) {
      // 微信
      if (this.$store.state.device === 'WX') {
        switch (index) {
          case 1:
            this.$router.push({ path: '/personal-order', query: { phone: this.userData.phone } })
            break
          case 3:
            this.openSchool()
            break
          case 4:
            window.location.href = 'http://study.oucnet.cn/pcenter/taste-exam/login.html'
            break
          case 6:
            if (this.$store.state.gsign === 'gkzx') {
              window.location.href = 'http://wechat.eenet.com/app/index.php?i=25&c=site&a=site&do=detail&id=65&wxref=mp.weixin.qq.com#wechat_redirect'
            } else {
              window.location.href = 'http://wechat.eenet.com/app/index.php?c=site&a=site&do=detail&id=76&i=34'
            }
            break
          case 8:
            window.location.href = 'http://mcd.oucnet.com/index.php?c=studentwap&m=entrance&id_card=' + this.userData.idCard
            break
          case 10:
            window.location.href = 'http://xfy.gdzgjy.com/index.php?c=apply&m=refundIndex&mobile=' + this.userData.phone
            break
        }
      } else {
        // APP 这部分还未对接 留着后期扩展
        switch (index) {
          case 1:
            // eslint-disable-next-line no-undef
            Phone.Order()
            break
          case 2:
            // eslint-disable-next-line no-undef
            Phone.consulting()
            break
          case 7:
            // eslint-disable-next-line no-undef
            Phone.goBindCompany()
            break
          case 8:
            // eslint-disable-next-line no-undef
            Phone.goCredit()
            break
          case 9:
            // eslint-disable-next-line no-undef
            Phone.goSetting()
            break
          case 10:
            window.location.href = 'http://xfy.gdzgjy.com/index.php?c=apply&m=refundIndex&mobile=' + this.userData.phone
            break
        }
      }
    }
  },
  mounted () {
    // 微信 ?device=WX&gsign=gkzx&uniacid=25
    // 手机 ?device=APP&phone=
    this.$store.state.device = this.$route.query.device
    this.$store.state.gsign = this.$route.query.gsign || 'gkzx'
    if (this.$route.query.device === 'WX') {
      if (this.$store.state.openid) { // 判断是否有本地openid
        if (this.$store.state.uniacid !== this.$route.query.uniacid || this.$store.state.gsign !== this.$route.query.gsign) {
          this.$store.state.uniacid = this.$route.query.uniacid
          this.$store.state.gsign = this.$route.query.gsign
          localStorage.setItem('stateData', JSON.stringify(this.$store.state))
          this.getWx()
        } else {
          this.getUserData()
        }
      } else {
        if (this.$route.query.openid) { // 判断地址有没有openid
          this.$store.state.openid = this.$route.query.openid
          localStorage.setItem('stateData', JSON.stringify(this.$store.state))
          this.getUserData()
        } else {
          this.getWx()
        }
      }
    } else {
      this.$store.state.uniacid = this.$route.query.uniacid
      this.$store.state.user.isGZ = this.$route.query.isGZ
      this.$store.state.user.phone = this.$route.query.phone
      localStorage.setItem('stateData', JSON.stringify(this.$store.state))
      this.getUserData()
    }
    this.getBannerList()
  }
}
</script>
<style lang="scss" scoped>
  .user_index {
    background: #f6f6f6;
    width: 100%;

    .header {
      position: relative;
      overflow: hidden;
      padding-bottom: 20px;
      background: #292b36;

      .card {
        width: 694px;
        height: 360px;
        background: url(../../../assets/img/modules/user/card_red.png) no-repeat;
        background-size: 694px 360px;
        position: relative;
        z-index: 10;
        margin: 50px auto 0;
        border-radius: 15px;
        box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2);

        .user_info {
          padding: 50px;

          .per_img {
            width: 110px;
            height: 110px;
            float: left;
            border-radius: 100%;
            margin-right: 20px;
          }

          .info {
            overflow: hidden;
            padding-top: 15px;

            h3 {
              margin: 0 0 15px;
              font-size: 36px;
              line-height: 40px;
              color: #fff;
              font-weight: normal;

              .label {
                height: 40px;
                margin-left: 20px;
                vertical-align: middle;
              }
            }

            p {
              margin: 0;
              font-size: 26px;
              color: #e2e2e2;
            }
          }
        }

        .code {
          position: absolute;
          left: 50px;
          top: 250px;
          font-size: 36px;
          color: #fff;
          line-height: 50px;
          opacity: 0.6;
        }
      }
      .label_status {
        display: inline-block;
        width: 122px;
        height: 50px;
        line-height: 40px;
        font-size: 24px;
        color: #fff;
        position: absolute;
        right: -10px;
        top: 30px;
        background: url(../../../assets/img/modules/user/label.png) no-repeat;
        background-size: 122px 50px;
        text-align: center;
      }
      .card_vip {
        background-image: url(../../../assets/img/modules/user/card_yellow.png);

        .user_info .info p {
          color: #fff;
        }
      }

      .btn_box {
        overflow: hidden;
        background: -ms-linear-gradient(top, #323543, #292b36);
        background: -moz-linear-gradient(top, #323543, #292b36);
        background: -webkit-gradient(
                linear,
                0% 0%,
                100% 0%,
                from(#323543),
                to(#292b36)
        );
        background: -webkit-gradient(
                linear,
                0% 0%,
                100% 0%,
                from(#323543),
                to(#292b36)
        );
        background: -webkit-linear-gradient(top, #323543, #292b36);

        .btn {
          float: left;
          width: 33.3%;
          text-align: center;
          font-size: 0;
          padding: 20px 0;
          display: block;
          img {
            width: 80px;
            height: 80px;
          }

          h3 {
            margin: 0 0 10px;
            font-size: 24px;
            color: #fff;
          }

          p {
            margin: 0;
            font-size: 22px;
            color: #b9b9b9;
          }
        }
      }
    }

    .banner {
      margin-bottom: 20px;
      background: #fff;
      font-size: 0;

      .item {
        width: 100%;
        padding: 30px;
        display: block;
        img {
          width: 686px;
          height: 140px;
          border-radius: 100px;
        }
      }
    }

    .equities_mdl {
      margin-bottom: 20px;

      .equities_head {
        padding: 35px 40px;
        background: #fff;
        overflow: hidden;
        font-size: 0;
        position: relative;

        i.ico_tri {
          float: right;
          margin: 26px 0px 0 30px;
          width: 12px;
          height: 8px;
          background: url(../../../assets/img/modules/user/ico_tri.png) no-repeat;
          background-size: 12px 8px;
          transform: rotate(180deg);
          -webkit-transform: rotate(180deg);
        }

        h3 {
          margin: 0;
          font-size: 32px;
          color: #222;
          float: left;
          line-height: 60px;
        }

        .img_list {
          font-size: 0;
          float: right;

          img {
            float: right;
            margin-right: -20px;
            width: 60px;
            height: 60px;
          }
        }

        .arrow_top {
          width: 100%;
          margin: 20px 0;
        }

        .app_tit {
          float: right;
          height: 30px;
          margin-top: 15px;
        }
      }

      .equities_head.act {
        i.ico_tri {
          transform: rotate(0);
          -webkit-transform: rotate(0);
        }
      }

      .equities {
        background: #fff;
        padding: 30px 0;

        .title {
          margin-bottom: 30px;
          margin-left: 30px;
          font-size: 0;

          img {
            height: 28px;
          }
        }

        ul {
          overflow: hidden;

          li,a {
            float: left;
            width: 33.33%;
            text-align: center;
            font-size: 0;
            margin-bottom: 20px;
            position: relative;

            .icon {
              width: 100px;
              height: 100px;
              margin-bottom: 20px;
            }

            p {
              font-size: 26px;
              color: #666;
              margin: 0;
            }

            .label {
              height: 24px;
              position: absolute;
              left: 50%;
              top: 0;
            }
          }
        }
      }

      .equities_vip {
        margin-top: 20px;
      }
    }

    .xyfw_mdl {
      background: #fff;
      margin-bottom: 20px;

      .equities_head {
        .img_list {
          img {
            margin-right: 15px;
          }
        }
      }

      .xyfw_list {
        ul {
          overflow: hidden;
          padding-bottom: 20px;

          li {
            float: left;
            width: 20%;
            text-align: center;
            margin-bottom: 20px;
            font-size: 0;

            img {
              width: 70px;
              height: 70px;
              margin-bottom: 15px;
            }

            p {
              font-size: 24px;
              color: #222;
              line-height: 30px;
              margin: 0;
            }
          }
        }
      }
    }

    .enter_list {
      background: #fff;

      .btn {
        display: block;
        height: 100px;
        position: relative;

        .icon {
          width: 40px;
          height: 40px;
          margin: 30px 25px;
          float: left;
        }

        .text {
          overflow: hidden;
          border-bottom: 1px solid #e5e5e5;
          font-size: 28px;
          color: #666;
          height: 100px;
          line-height: 98px;

          i.red_dot {
            display: inline-block;
            height: 14px;
            width: 14px;
            background: #FF0000;
            border-radius: 100%;
            margin-left: 10px;
          }
        }

        .right {
          position: absolute;
          top: 50%;
          right: 30px;
          height: 40px;
          margin-top: -20px;
          font-size: 0;

          .tri {
            float: right;
            width: 20px;
            height: 20px;
            border-top: 1px solid #999;
            border-right: 1px solid #999;
            margin-top: 10px;
            margin-left: 15px;
            transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
          }

          span {
            font-size: 24px;
            color: #fba146;
            line-height: 40px;
          }
        }
      }

      .btn:last-child {
        .text {
          border-bottom: none;
        }
      }
    }
  }
</style>
